<template>
	<view>
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">回收站</block>
		</cu-custom>
		<view class="cu-list menu-avatar margin-top-sm">
			<view class="cu-item" :class="modalName=='move-box-'+ item.id?'move-cur':''" v-for="(item,index) in files" :key="index" :data-fileid="item.id"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + item.id" @tap="showfile">
				<!-- #ifndef H5 -->
				<view class="cu-avatar radius lg" style="background-image: url(../../static/file.jpg);"></view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="cu-avatar radius lg fileBackground"></view>
				<!-- #endif -->
				<view class="content">
					<view class="text-grey">{{item.fileTitle}}</view>
					<view class="text-gray text-sm ellipsis">
						<text class="cuIcon-infofill text-red  margin-right-xs"></text>{{item.fileRemark?item.fileRemark:item.fileName}}</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.updateTime}}</view>
					<view class="cu-tag round bg-grey sm">{{item.fileType.name}}</view>
				</view>
				<view class="move">
					<view class="bg-grey" :data-fileid="item.id" :data-index="index" @tap.stop="restore">还原</view>
					<view class="bg-red" :data-fileid="item.id" :data-index="index" @tap.stop="del">删除</view>
				</view>
			</view>
		</view>
		
		<!-- 清空按钮 -->
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-purple lg" @tap="removeAll">清空回收站</button>
			<!-- <button class="cu-btn bg-red margin-tb-sm lg">嫣红</button> -->
		</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		computed:mapState(['userName','pwd','hasLogin','server']),
		data() {
			return {
				files:[],
				listTouchStart:0,
				listTouchStartY:0,
				listTouchDirection:null,
				modalName:null,
				xx: null
			}
		},
		methods: {
			reload(){
				var serverUrl=this.server.url;
				this.page=0;
				this.lastTime='';
				uni.request({
					url: serverUrl + 'app/findDeletedList',
					sslVerify: false,
					method: 'POST',
					header: {
						'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
					},
					data: {
						userName : this.userName
					},
					success: res => {
						var result=res.data;
						//console.log(result);
						this.files=result
					}
				});
			},
			search1(e){
				this.search=e.value;
				this.reload();
			},
			cancel(){
				if(this.search==''){
					return;
				}
				this.search='';
				this.reload();
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX;
				this.listTouchStartY = e.touches[0].clientY;
			},
					
			// ListTouch计算方向
			ListTouchMove(e) {
				var flag=Math.abs(e.touches[0].pageX-this.listTouchStart)-Math.abs(e.touches[0].clientY-this.listTouchStartY)>0;
				this.listTouchDirection =flag && (e.touches[0].pageX - this.listTouchStart <-20) ?'left' : 'right' ;
			},
					
			// ListTouch计算滚动
			ListTouchEnd(e) {
				//console.log(e.touches[0].pageX);
				if(this.modalName == e.currentTarget.dataset.target){
					this.xx=false;
				}else{
					this.xx=true;
				}
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null;
				}
				this.listTouchDirection = null
				
			},
			showfile(e){
				/* if(this.xx){
					var fileid=e.currentTarget.dataset.fileid;
					uni.navigateTo({
						url: './file?fileid='+fileid
					});
				} */
			},
			restore(e){
				var fileid=e.currentTarget.dataset.fileid;
				var index=e.currentTarget.dataset.index;
				uni.request({
					url: this.server.url + 'app/restore',
					method: 'GET',
					sslVerify: false,
					data: {id:fileid},
					success: res => {
						var result=res.data;
						if(result.success){
							this.files.splice(index,1);
						}else{
							uni.showToast({
								title: '文件还原失败',
								icon: 'none'
							});
						}
					},
					fail() {
						uni.showToast({
							title: '网络连接失败,请检查网络...',
							icon: 'none'
						});
					}
				});
			},
			del(e){
				var serverUrl=this.server.url;
				var fileid=e.currentTarget.dataset.fileid;
				var index=e.currentTarget.dataset.index;
				uni.showModal({
					title: '对话框',
					content: '确定要从服务器上彻底删除这文件？',
					cancelText: '放弃',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: serverUrl + 'app/remove',
								method: 'GET',
								sslVerify: false,
								data: {id:fileid,userName:this.userName},
								success: res => {
									this.files.splice(index,1);
								}
							});
						}
					}
				});
			},
			removeAll(){
				uni.showModal({
					title: '提示',
					content: '是否要清空回收站？',
					showCancel: true,
					cancelText: '放弃',
					confirmText: '确定',
					success: res => {
						if(res.confirm){
							uni.request({
								url: this.server.url + 'app/removeAll' ,
								method: 'GET',
								sslVerify: false,
								data: {userName:this.userName},
								success: res => {
									var result=res.data;
									if(result.success){
										this.files=[];
									}
								},
								fail: () => {
									uni.showToast({
										title: '网络连接失败，请检查网络...',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onLoad() {
			if(!this.hasLogin){
				uni.redirectTo({
					url:'./login'
				});
				return;
			}
			this.reload();
		}
		
	}
</script>

<style>
.fileBackground {
	background-image: url(../../static/file.jpg);
}
</style>
